<template>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <div>
            <div class="search">
                <van-search @focus="skip_search" shape="round" show-action placeholder="请输入搜索关键词">
                    <template #action>
                        <van-icon @click="skip_msg" name="chat-o" badge="99" size="30px" />
                    </template>
                </van-search>
            </div>
            <div class="body">
                <div class="swiper">
                    <van-swipe :autoplay="3000" lazy-render style="height: 100%;" class="my-swipe">
                        <van-swipe-item v-for="image in images" :key="image">
                            <img :src="image" style="height: 100%; width: 100vw;" />
                        </van-swipe-item>
                    </van-swipe>
                </div>
                <div class="goods">

                    <div class="goods_title">
                        <span style="font-size: 25px; font-weight: 600;">商品推荐</span>
                        <span style="font-weight: 100; font-size: 14px;">大家都在买的品质好物</span>
                    </div>
                    <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
                        <span class="item" v-for="item in list" @click="ship_detail(item.id)">
                            <!-- {{item.goods_imgs[0].path}} -->
                            <div class="item_img" :style="{'backgroundImage':'url('+item.goods_imgs[0].path+')'}">
                            </div>
                            <div class="item_title">
                                <span>{{item.title}}</span>
                            </div>
                            <div class="item_money">
                                <span class="money">￥{{item.low_price}}元</span>
                                <span class="payed">{{item.sell}}人付款</span>
                            </div>
                        </span>
                    </van-list>
                </div>
            </div>
        </div>
        <div class="shopping_cart" @click="skip_myCart">
            <van-icon name="shopping-cart-o" size="40" color="#ffff" />
        </div>
    </van-pull-refresh>
</template>
    
<script setup lang='ts'>
import { Toast } from "vant";
import { onMounted, ref } from "vue"
import { useRouter } from "vue-router"
import Product from "@/api/main"
const Router = useRouter()
const _product = new Product()



//跳转到search组件
function skip_search() {
    Router.push('/search')
}
//跳转到message组件
function skip_msg() {
    Router.push('/message')
}
//轮播图
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
];





const list: any = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
let num = -1
let dataLength = 0
const onLoad = () => {
    if (num >= dataLength) {
        console.log(list.value);

        finished.value = true;
    } else if (dataLength - list.value.length <= 5) {
        num = dataLength
    }

    if (refreshing.value) {
        list.value = [];
        refreshing.value = false;
        num = -1
    }

    num = num + 5
    _product.getAllGoods({
        num
    }).then((res: any) => {
        list.value = res.data.allData
        loading.value = false
        dataLength = res.data.total
        for (let i = 0; i < list.value.length; i++) {
            let low_price = list.value[i].caiLiao[0].price - 0
            for (let j = 0; j < list.value[i].caiLiao.length; j++) {
                if (list.value[i].caiLiao[j].price - 0 < low_price) {
                    low_price = list.value[i].caiLiao[j].price-0
                }
            }
            list.value[i].low_price = low_price.toFixed(2)
        }
    })
};

//下拉刷新
const onRefresh = () => {

    // 清空列表数据
    finished.value = false;

    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    loading.value = true;
    onLoad();
};

function skip_myCart() {
    Router.push('/my_cart')
}


function ship_detail(cc: any) {
    Router.push({
        path: '/goods_detail',
        query: {
            id: cc
        }
    })
}
</script>
    
<style scoped>
.search {
    display: fixed;
    height: 10vh;
}

.body {
    overflow: scroll;
    height: 80vh;
}

.swiper {
    height: 30vh;
}


.goods_title {
    box-sizing: border-box;
    height: 10vh;
    background-color: pink;
    display: flex;
    flex-direction: column;
    margin: 15px 10px 10px 10px;
    background-image: url('@/assets/shop_img.jfif');
    background-size: cover;
    background-repeat: no-repeat;
}


.item {
    box-sizing: border-box;
    display: inline-block;
    margin: 10px 10px;
    width: 44vw;
    height: 35vh;
}

.item_img {
    width: 100%;
    height: 65%;
    background-image: url(@/assets/luck_cat.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 5px;
}

.item_title {
    height: 25%;
}

.item_title>span {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 20px;
    font-weight: 500;
}

.item_money {
    height: 10%;
}

.item_money>.money {
    font-size: 20px;
    font-weight: 300;
    color: red;
    padding-right: 10px;
}

.item_money>.payed {
    font-size: 10px;
}

.shopping_cart {
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.4;
    width: 8vh;
    height: 8vh;
    background-color: black;
    position: fixed;
    bottom: 10vh;
    right: 5vw;
}
</style>